<template>
    <d2-container>
        <div style="margin-bottom: 40px">
            <a href="#/message/changeMessageModel">
                <el-button type="primary" style="float:right" icon="el-icon-plus" size="mini">新建消息模版</el-button>
            </a>
        </div>
        <el-table :data="dataList" border style="width: 100%">

            <el-table-column prop="message" label="消息"></el-table-column>
            <!-- <el-table-column prop="class" label="当前负责班级"></el-table-column> -->

            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <!-- <el-button @click="detailClick(scope.row)" type="text" size="small">查看详情</el-button> -->
                    <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total,sizes,prev, pager, next,jumper" :page-size="pageSize"
            :current-page="currentPage" :total="total" @current-change="handleCurrentChange"
            @size-change="handlerSizeChange" @next-click="handleNextPage" @prev-click="handlePrevClick"></el-pagination>
    </d2-container>
</template>

<script>
import request from "@/plugin/axios";
import { mapState } from "vuex";
import excel from "@/libs/util.excel"

export default {
    data() {
        return {
            dataList: [],
            total: 0,
            pageSize: 10,
            currentPage: 1,
            classroom: [],
            dataSearch: {},
            schoolList: [],
            school: undefined,
            departmentList: [],
            department: undefined,
            cellphone: undefined,
            name: undefined,
            disabled: false,
            schoolLimit: undefined,
            headquarter: 0

        };
    },
    computed: {
        ...mapState('d2admin/user', ['info']),
    },
    methods: {
        formSubmit() {
            this.dataSearch.page = this.currentPage;
            this.dataSearch.pageSize = this.pageSize;
            this.getDataList(this.dataSearch);
        },
        formReset() {
            this.dataSearch = {}
            this.getDataList(this.dataSearch)
        },
        detailClick(e) {
            this.$router.push({ path: "/message/changeMessageModel?id=" + e._id });
        },
        schoolSelected() {
            this.dataSearch.department = undefined
            this.getDepartmentList(1, 99999, this.dataSearch.school);
        },

        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.dataSearch.page = this.currentPage;
            this.dataSearch.pageSize = this.pageSize;
            this.getDataList(this.dataSearch);
        },
        handlerSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.dataSearch.page = this.currentPage;
            this.dataSearch.pageSize = this.pageSize;
            this.getDataList(this.dataSearch);
        },
        handleNextPage() {
            this.currentPage = this.currentPage + 1;
            this.dataSearch.page = this.currentPage;
            this.dataSearch.pageSize = this.pageSize;
            this.getDataList(this.dataSearch);
        },
        handlePrevClick() {
            this.currentPage = this.currentPage - 1;
            this.dataSearch.page = this.currentPage;
            this.dataSearch.pageSize = this.pageSize;
            this.getDataList(this.dataSearch);
        },
        deleteClick(e) {
            this.$confirm("此操作将删除该消息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: "/message/deleteMessageModel",
                    method: "post",
                    data: { id: e._id }
                }).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: "删除成功"
                        });
                        this.getDataList(this.dataSearch);
                    }
                });
            })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        getSchoolList(page, pageSize) {
            let data = {};
            data.page = 1
            data.pageSize = 999999
            request({
                url: "/school/getSchoolList",
                method: "post",
                data
            }).then(res => {
                this.schoolList = res.data.school;
                // 返回数据
            });
        },
        getDepartmentList(page, pageSize, school) {
            let data = {};
            (data.page = page), (data.pageSize = pageSize), (data.school = school);
            request({
                url: "/department/getDepartmentList",
                method: "post",
                data
            }).then(res => {
                this.departmentList = res.data.department;
                // 返回数据
            });
        },

        getDataList() {
            this.dataSearch.page = this.currentPage;
            this.dataSearch.pageSize = this.pageSize;
            request({
                url: "/message/getMessageModelList",
                method: "post",
                // data: this.dataSearch
            }).then(res => {
                this.dataList = res.data.data;
                this.total = res.data.total;
                this.currentPage = res.data.currentPage;
            });
        },

        downloadTemplate() {

            excel.export([{ label: '名字', prop: 'name' }, { label: '性别', prop: 'gender' }, { label: '生日', prop: 'birthday' }, { label: '手机', prop: 'cellphone' }, { label: '地址', prop: 'address' }, { label: '部门', prop: 'department' }, { label: '职务', prop: 'position' }, { label: '入职日期', prop: 'entryDate' }], [{ name: '张三', gender: '0（0-男，1-女)', birthday: '2010.02.02(必须用“.”分隔)', cellphone: '13501234567', department: '教学组(名字必须正确，否则无法导入)', position: '教务(名字必须正确，否则无法导入)', address: '张哈路1111号', entryDate: '2010.02.02(必须用“.”分隔)' }], '员工批量导入模板')
            // this.$export.excel({
            //     columns: [{label:'名字',prop:'name'},{label:'性别',prop:'gender'},{label:'生日',prop:'birthday'},{label:'手机',prop:'cellphone'},{label:'地址',prop:'address'},{label:'部门',prop:'department'},{label:'入职日期',prop:'entryDate'}],
            //     data: [{name:'张三',gender:'0（0-男，1-女)',birthday:'2010.02.02(必须用“.”分隔)',cellphone:'13501234567',department:'教学组(名字必须正确，否则无法导入)',address:'张哈路1111号',entryDate:'2010.02.02(必须用“.”分隔)'}],
            //     title : '员工批量导入模板'
            // })
            //     .then(() => {
            //         this.$message('导出表格成功')
            //     })
        },

        },
    created() {
            this.getDataList();
    }
};
</script>
